<template>
    <scroll-view show-scrollbar="false" scroll-with-animation="true" class="scroll-view_H" scroll-x="true" @scroll="scroll" :scroll-left="leftpx">
        <view id="demo1" class="NoscrollItemb" v-for="(item, index) in baseData" :key="index" @click="isSelectItemButton(index)">
            <view :class="{'scroll-view-item_H': item.isSelect, 'Noscroll-view-item_H': !item.isSelect}">Day{{item.Day}}</view>
        </view>
    </scroll-view>
</template>

<script setup>
import { ref, watch } from 'vue';
const leftpx = ref(0);
const emits = defineEmits(['isSelect','updateScrollPosition']);
const props = defineProps({
    baseData: {
        type: Array,
        default: () => []
    }
});

// 计算每个 item 的宽度（假设每个 item 宽度相同）
const itemWidth = 100; // 假设每个 item 宽度为 100px，根据实际情况调整

// 确保 baseData 是响应式的
watch(() => props.baseData, (newVal) => {
    console.log('baseData updated:', newVal);
}, { deep: true });

const isSelectItemButton = (index) => {
    emits('isSelect', props.baseData[index].day, props.baseData[index], true);
    updateScrollPosition(index);

    // 更新选中状态
    const updatedBaseData = [...props.baseData];
    updatedBaseData.forEach((item, i) => {
        item.isSelect = index === i;
    });
};

// 更新滚动位置以显示选中的 item
const updateScrollPosition = (selectedIndex) => {
    leftpx.value = selectedIndex * itemWidth;
};

// 监听来自父组件的滚动位置更新请求
defineExpose({
    updateScrollPosition
});
</script>

<style scoped>
	.NoscrollItemb{
		  display: inline-block;
	}
	.scroll-view_H {
		margin-left: -10rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		white-space: nowrap;
		width: 100%;
	}
	.Noscroll-view-item_H {
		padding-top: 10rpx;
		display: inline-block;
		/* width: 110rpx; */
		padding-left: 20rpx;
		padding-right: 20rpx;
		border: 1rpx solid #d0d0d0;
		height: 50rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}
	.scroll-view-item_H {
		padding-top: 10rpx;
		display: inline-block;
		/* width: 110rpx; */
		padding-left: 20rpx;
		padding-right: 20rpx;
		border: 1rpx solid #000039;
		height: 50rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}
</style>